<template>
	<view class="container">
		<view class="card">
			<view class="header">
				<view class="title">
					<text>功能管理</text>
				</view>
			</view>
			<view class="menu">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(item,itemIndex) in commonList" :key="itemIndex" :customStyle="{paddingTop: '30rpx'}" @click="onLink(item.path)" >
						<image :src="item.icon"></image>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="card">
			<view class="header">
				<view class="title">
					<text>知识库</text>
				</view>
			</view>
			<view class="menu">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(item,itemIndex) in knowledgeList" :key="itemIndex" :customStyle="{paddingTop: '30rpx'}" @click="onLink(item.path)" >
						<image :src="item.icon"></image>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="card">
			<view class="header">
				<view class="title">
					<text>订单管理</text>
				</view>
			</view>
			<view class="menu">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(item,itemIndex) in orderList" :key="itemIndex" :customStyle="{paddingTop: '30rpx'}" @click="onLink(item.path)" >
						<image :src="item.icon"></image>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- <view class="card">
			<view class="header">
				<view class="title">
					<text>消息通知</text>
				</view>
				<view class="extra" @click="onLinkNews">
					<u-icon name="arrow-right" color="#666" size="20rpx" label="更多" labelPos="left" labelSize="24rpx"
						labelColor="#666">
					</u-icon>
				</view>
			</view>
			<view class="news">
				<view class="empty">暂无消息通知</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commonList: [{
						icon: '/static/workbench/icon_venue.png',
						name: '场馆管理',
						path: '/pagesWorkbenches/pages/venue/venue'
					},
					{
						icon: '/static/workbench/icon_venue.png',
						name: '场地管理',
						path: '/pagesWorkbenches/pages/venueLocation/venueLocation'
					},
					{
						icon: '/static/workbench/icon_venue.png',
						name: '设备管理',
						path: '/pagesWorkbenches/pages/deviceManage/deviceManage'
					},
					{
						icon: '/static/workbench/icon_person.png',
						name: '人员管理',
						path: '/pagesWorkbenches/pages/venuePersonnel/venuePersonnel'
					},
					{
						icon: '/static/workbench/icon_course.png',
						name: '课程管理',
						path: '/pagesWorkbenches/pages/course/course'
					},
					{
						icon: '/static/workbench/icon_match.png',
						name: '赛事管理',
						path: '/pagesWorkbenches/pages/eventManage/eventManage'
					},
					{
						icon: '/static/workbench/icon_work.png',
						name: '订单核销',
						path: '/pagesWorkbenches/pages/orderWriteOff/orderWriteOff'
					},
					{
						icon: '/static/workbench/icon_course.png',
						name: '财务管理',
						path: '/pagesWorkbenches/pages/financial/financial'
					}
				],
				knowledgeList: [
					{
						icon: '/static/workbench/icon_order_ball.png',
						name: '运动知识',
						path: '/pagesWorkbenches/pages/sportKnowledge/sportKnowledge'
					},
					{
						icon: '/static/workbench/icon_order_course.png',
						name: '健康指南',
						path: '/pagesWorkbenches/pages/healthGuide/healthGuide'
					},
					// {
					// 	icon: '/static/workbench/icon_order_match.png',
					// 	name: '专业指导'
					// },
				],
				orderList: [{
						icon: '/static/workbench/icon_order_prev.png',
						name: '预约订单',
						path: '/pages/order/venueReservation/venueReservation'
					},
					{
						icon: '/static/workbench/icon_order_ball.png',
						name: '约球订单',
						path: '/pages/order/aboutball/aboutball'
					},
					{
						icon: '/static/workbench/icon_order_course.png',
						name: '课程订单',
						path: '/pages/order/coursesBuy/coursesBuy'
					},
					{
						icon: '/static/workbench/icon_order_match.png',
						name: '赛事订单',
						path: '/pages/order/eventRegistration/eventRegistration'
					},
					{
						icon: '/static/workbench/icon_order_ball.png',
						name: '设备租用',
						path: '/pages/order/deviceLeast/deviceLeast'
					},
					{
						icon: '/static/workbench/icon_order_ball.png',
						name: '用户评价',
						path: '/pages/order/orderEvaluate/orderEvaluate'
					},
				]
			}
		},
		methods: {
			// 跳转路由
			onLink(path) {
				var venueId = uni.getStorageSync('venueId');
				if(path != '/pagesWorkbenches/pages/venue/venue'){
					if(!venueId){
						uni.showModal({
						   title: '暂无权限',
						   content: '请申请场馆且客服审核通过场馆后可用',
						   showCancel: false,
						   success: function (res) {}
						});
						return false;
					}
				}
				
				uni.navigateTo({
					url: path
				})
			},
			// 跳转消息列表
			onLinkNews() {
				uni.navigateTo({
					url: '/packageWork/pages/news/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {

		.card {
			padding: 31rpx 41rpx 36rpx;
			background-color: #fff;

			.header {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					flex: 1;
					font-size: 31rpx;
					font-weight: bold;
					color: #252525;

					text {
						position: relative;
						z-index: 0;

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							height: 10rpx;
							border-radius: 5rpx;
							background: linear-gradient(90deg, #F1F7FF 0%, #0544ab 100%);
							z-index: -1;
						}
					}
				}
			}

			.menu {
				padding-top: 12rpx;

				image {
					display: block;
					width: 70rpx;
					height: 70rpx;
				}
				.grid-text {
					text-align: center;
					font-size: 28rpx;
					color: #444444;
					padding-top: 15rpx;
				}
			}

			.news {
				padding-top: 12rpx;
				padding-bottom: 20rpx;

				.item {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #252525;
					line-height: 32rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.empty {
					padding: 100rpx 0;
					font-size: 30rpx;
					color: #252525;
					text-align: center;
				}
			}

			&:nth-child(n + 2) {
				border-top: 15rpx solid #f5f9ff;
			}
		}
	}
</style>